<template>
  <view>
    <up-popup round="16" :show="modelValue" :closeOnClickOverlay="true" @close="close" mode="bottom" @open="open">
      <view class="up_popup_title">
        <view class="title">洗护保价</view>
        <image src="@/static/icon/icon_close.png" @tap="close"></image>
      </view>
      <scroll-view scroll-y class="price-ranges">
      <view
        v-for="(item, index) in priceRanges"
        :key="index"
        :class="['price-item', selectedRange === index ? 'active' : '']"
        @tap="selectRange(index)"
      >
        <view class="price-info">
          <text class="range-text">洗护衣物价值</text>
          <text class="range-value">{{item.amountMin}}-{{item.amountMax}}</text>
        </view>
        <view class="price-info">
          <text class="range-text">保价价格</text>
          <text class="price-value">¥{{item.fee}}</text>
        </view>
      </view>
    </scroll-view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { defineProps, defineEmits } from 'vue';
import {feeConfigQryInsuranceFeeConfig} from '@/api/cleaningOrder'
import {useCustomStores} from '@/utils/hook'
const {ShopStore:{shopInfo},ShopStore} = useCustomStores()
const selectedRange = ref(null);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:modelValue', 'select']);
const close = () => {
  emit('update:modelValue', false);
};
const priceRanges = ref([]);
function loadFeeConfigQryInsuranceFeeConfig(){
  feeConfigQryInsuranceFeeConfig({
    storeId:shopInfo.storeId
  }).then(res=>{
    priceRanges.value = res
  })
}

loadFeeConfigQryInsuranceFeeConfig()
const selectRange = (index) => {
  if (selectedRange.value === index) {
    selectedRange.value = null;
    emit('select', null); // 传递 null 表示没有选中任何价格区间
  } else {
    // 否则选中点击的项
    selectedRange.value = index;
    emit('select', priceRanges.value[index]);
  }
};
</script>

<style lang="scss">
.up_popup_title {
  box-sizing: border-box;
  padding: 32rpx;
  display: flex;
  //border-bottom: 2rpx solid #f5f5f5;
  > image {
    width: 28rpx;
    height: 28rpx;
  }
  .title {
    flex: 1;
    font-weight: 500;
    font-size: 32rpx;
    color: #222222;
    text-align: center;
  }
}
.price-ranges {
  height: 800rpx;
  padding: 20rpx;

  .price-item {
    padding: 30rpx;
    margin-bottom: 20rpx;
    background: #f8f8f8;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .price-info {
      display: flex;
      flex-direction: column;

      .range-text {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
      }

      .range-value {
        font-size: 28rpx;
        color: #333;
      }

      .price-value {
        font-size: 28rpx;
        color: #ff4d4f;
      }
    }

    &.active {
      background: #fff;
      border: 2rpx solid #2080f7;
      font-weight: 600;
    }
  }
}
</style>
